<template>
  <div class="debug-auth">
    <h3>认证调试页面</h3>
    
    <el-card style="margin-bottom: 20px;">
      <h4>本地存储状态</h4>
      <p><strong>Token:</strong> {{ localToken || '未设置' }}</p>
      <p><strong>用户信息:</strong> {{ localUserInfo || '未设置' }}</p>
      <p><strong>Token长度:</strong> {{ tokenLength }}</p>
    </el-card>

    <el-card style="margin-bottom: 20px;">
      <h4>Store状态</h4>
      <p><strong>Store Token:</strong> {{ userStore.token || '未设置' }}</p>
      <p><strong>Store 用户信息:</strong> {{ JSON.stringify(userStore.userInfo) }}</p>
    </el-card>

    <el-card style="margin-bottom: 20px;">
      <h4>快速登录测试</h4>
      <el-form :model="loginForm" style="max-width: 400px;">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.username" placeholder="输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" type="password" placeholder="输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="testLogin" :loading="loginLoading">测试登录</el-button>
          <el-button @click="clearAuth">清除认证</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-bottom: 20px;">
      <h4>API测试</h4>
      <el-button @click="testVenuesAPI" :loading="apiLoading">测试场馆API</el-button>
      <div v-if="apiResult" style="margin-top: 10px;">
        <h5>API结果:</h5>
        <pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; max-height: 300px; overflow: auto;">{{ apiResult }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

export default {
  name: 'DebugAuth',
  setup() {
    const userStore = useUserStore()
    const loginLoading = ref(false)
    const apiLoading = ref(false)
    const apiResult = ref('')
    
    const loginForm = ref({
      username: 'admin',
      password: 'admin123'
    })
    
    const localToken = ref('')
    const localUserInfo = ref('')
    
    const tokenLength = computed(() => {
      return localToken.value ? localToken.value.length : 0
    })
    
    const loadLocalStorage = () => {
      localToken.value = localStorage.getItem('admin_token') || ''
      localUserInfo.value = localStorage.getItem('admin_info') || ''
    }
    
    const testLogin = async () => {
      loginLoading.value = true
      try {
        const response = await fetch('/api/v1/admin/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(loginForm.value)
        })
        
        const data = await response.json()
        
        if (data.code === 200) {
          localStorage.setItem('admin_token', data.data.token)
          localStorage.setItem('admin_info', JSON.stringify(data.data.admin))
          ElMessage.success('登录成功')
          loadLocalStorage()
        } else {
          ElMessage.error(data.message || '登录失败')
        }
      } catch (error) {
        ElMessage.error('登录错误: ' + error.message)
      } finally {
        loginLoading.value = false
      }
    }
    
    const clearAuth = () => {
      localStorage.removeItem('admin_token')
      localStorage.removeItem('admin_info')
      loadLocalStorage()
      ElMessage.info('认证信息已清除')
    }
    
    const testVenuesAPI = async () => {
      apiLoading.value = true
      try {
        const response = await request.get('/v1/admin/venues', {
          params: { per_page: 5 }
        })
        apiResult.value = JSON.stringify(response, null, 2)
        ElMessage.success('API测试成功')
      } catch (error) {
        apiResult.value = `错误: ${error.message}\n${JSON.stringify(error.response?.data || {}, null, 2)}`
        ElMessage.error('API测试失败')
      } finally {
        apiLoading.value = false
      }
    }
    
    onMounted(() => {
      loadLocalStorage()
    })
    
    return {
      userStore,
      loginForm,
      loginLoading,
      apiLoading,
      apiResult,
      localToken,
      localUserInfo,
      tokenLength,
      testLogin,
      clearAuth,
      testVenuesAPI
    }
  }
}
</script>

<style scoped>
.debug-auth {
  padding: 20px;
  max-width: 1000px;
}

pre {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}
</style> 